<template>
  <div class="baoquan">
    <el-dialog :visible.sync="saveDialogVisible" width="1800px" top="66px">
      <div class="banner">
        <div class="left scrollBar">
          <div class="search">
            <img :src="logoUrl" alt />
          </div>
          <div class="text">
            <h1>{{nameO}}</h1>
          </div>
          <div class="dangAn">
            <img src="../assets/images/档案列表.png" alt class="imgyi" />
            <div class="box">
              <ul>
                <li class="first">
                  <span>姓名</span>
                  <span>职务</span>
                  <span>联系电话</span>
                </li>
                <li v-for="item in listO" :key="item.id" @click="goLz(item.id)">
                  <span class="three">{{item.name}}</span>
                  <span class="three">{{item.post}}</span>
                  <span class="three">{{item.mobilePhone}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right scrollBar">
          <div class="search">
            <div class="person">
              <img src="../assets/images/个人档案.png" alt class="imgyi" />
              <div class="person1">
                <div class="left1">
                  <div class="pic">
                    <img :src="this.baseUrl+this.dataList.avatar" alt class="imger" />
                  </div>

                  <div class="name1">{{this.dataList.name}}</div>
                  <div class="det">
                    <span>现任职务：</span>
                    <span>{{this.dataList.post}}</span>
                  </div>
                  <div class="det">
                    <span>任职时间：</span>
                    <span>{{this.dataList.takeOfficeTime}}</span>
                  </div>
                </div>
                <div class="right1">
                  <div class="end">
                    <div class="A">
                      <div class="a1">
                        <span class="a1-1 w2">性别</span>：
                        <span class="a1-2">{{this.dataList.sex}}</span>
                      </div>
                      <div class="a2">
                        <span class="a1-1 w2">民族</span>：
                        <span class="a1-2">{{this.dataList.nation}}</span>
                      </div>
                    </div>
                    <div class="A">
                      <div class="a1">
                        <span class="a1-1 w2">籍贯</span>：
                        <span class="a1-2">{{this.dataList.nativeProvince}}</span>
                      </div>
                      <div class="a2">
                        <span class="a1-1 w2">学历</span>：
                        <span class="a1-2">{{this.dataList.education}}</span>
                      </div>
                    </div>
                    <div class="A">
                      <div class="a1">
                        <span class="a1-1">出生日期：</span>
                        <span class="a1-2">{{this.dataList.birthTime}}</span>
                      </div>
                      <div class="a2">
                        <span class="a1-1">联系方式：</span>
                        <span class="a1-2">{{this.dataList.mobilePhone}}</span>
                      </div>
                    </div>
                    <div class="A">
                      <div class="a1">
                        <span class="a1-1">政治面貌：</span>
                        <span class="a1-2">{{this.dataList.politicalOutlook}}</span>
                      </div>
                      <div class="a2">
                        <span class="a1-1">身份证号：</span>
                        <span class="a1-2">{{this.dataList.idCard}}</span>
                      </div>
                    </div>
                    <div class="A">
                      <div class="a1 a3">
                        <div class="a1-1">家庭住址：</div>
                        <div class="a1-2 b2-1">{{this.dataList.resideAddress}}</div>
                      </div>
                      <div class="a2 a3">
                        <div class="a1-1">工作单位：</div>
                        <div class="a1-2 b2-1">{{this.dataList.orgName}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="education">
              <img src="../assets/images/教育背景.png" alt class="imgyi" />
              <div class="box1">
                <ul>
                  <li class="first">
                    <span>开始时间</span>
                    <span>结束时间</span>
                    <span>类型</span>
                    <span>学校</span>
                    <span>专业</span>
                    <span>学历</span>
                    <span>学位</span>
                  </li>
                  <li v-for="(item,index) in this.dataList.eduExpLst" :key="index">
                    <span>{{item.beginTime}}</span>
                    <span>{{item.endTime}}</span>
                    <span>{{item.eduType}}</span>
                    <span>{{item.school}}</span>
                    <span>{{item.major}}</span>
                    <span>{{item.education}}</span>
                    <span>{{item.degree}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="education">
              <img src="../assets/images/家庭情况.png" alt class="imgyi" />
              <div class="box1">
                <ul>
                  <li class="first">
                    <span>姓名</span>
                    <span>关系类型</span>
                    <span>关系</span>
                    <span>出生日期</span>
                    <span>单位/学校</span>
                  </li>
                  <li v-for="(item,index) in this.dataList.familyRelationLst" :key="index">
                    <span>{{item.name}}</span>
                    <span>{{item.familyRelationType}}</span>
                    <span>{{item.familyRelation}}</span>
                    <span>{{item.birthTime}}</span>
                    <span>{{item.companyOrSchool}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="education">
              <img src="../assets/images/工作经历.png" alt class="imgyi" />
              <div class="box1">
                <ul>
                  <li class="first">
                    <span>开始时间</span>
                    <span>结束时间</span>
                    <span>单位</span>
                    <span>职务</span>
                  </li>
                  <li v-for="(item,index) in this.dataList.workExpLst" :key="index">
                    <span>{{item.beginTime}}</span>
                    <span>{{item.endTime}}</span>
                    <span>{{item.unit}}</span>
                    <span>{{item.post}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="education">
              <img src="../assets/images/表彰及奖励.png" alt class="imgyi" />
              <div class="box1">
                <ul>
                  <li class="first">
                    <span>表彰时间</span>
                    <span>表彰内容</span>
                    <span>授予单位</span>
                  </li>
                  <li v-for="(item,index) in this.dataList.workExpLst" :key="index">
                    <span>{{item.beginTime}}</span>
                    <span>{{item.endTime}}</span>
                    <span>{{item.unit}}</span>
                    <span>{{item.post}}</span>
                  </li>
                </ul>
              </div>
              <div
                class="box2"
                v-if="this.dataList.workExpLst!==undefined&&this.dataList.workExpLst.length===0"
              >
                <span>
                  <img src="../assets/images/表彰图标.png" alt class="imgyi" />
                </span>
                <span class="last">暂无表彰及奖励</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["id", "nameO", "logoUrl", "listO"],
  data() {
    return {
      // 保全总量
      saveDialogVisible: false,
      // 保全编号

      region: "",
      // 保全时间
      date: "",
      list: [],
      // 档案详情
      dataList: [],
      baseUrl: "",
    };
  },
  created() {
    this.baseUrl = this.$store.state.fileIp;
  },
  watch: {
    id() {
      this.getText();
    },
  },
  methods: {
    getText() {
      this.Api.companyPersonDetail({ id: this.id }).then((res) => {
        this.dataList = res.data;
      });
    },
    // 根据列表数据切换
    goLz(id) {
      this.Api.companyPersonDetail({ id: id }).then((res) => {
        this.dataList = res.data;
      });
    },
    show() {
      this.saveDialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  background: url("../assets/images/廉政档案.png") #000080 !important;
  background-position: 20px !important;
  background-repeat: no-repeat !important;
  position: relative;
  padding: 81px 20px 10px 30px;
  box-sizing: border-box;
  width: 100%;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background: url(../assets/images/bg.png);
  background-repeat: repeat !important;
  height: 800px !important;
}
.three {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.banner {
  width: 1761px;
  height: 850px !important;
  padding: 0px 2px 0px 0;
  background: url("../assets/images/框1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 70px;
  display: flex;
}
.left {
  width: 540px;
  height: 720px;
  border-right: 2px solid #0a46f2;
  margin-top: 66px;
  margin-bottom: 20px;
  overflow-y: auto;
}
.right {
  width: 1174px;
  height: 720px;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.search {
  flex: 1;
  text-align: center;
}
.text {
  margin-top: 41px;
  padding: 0 68px;
  box-sizing: border-box;
}
.text h1 {
  width: 392px;
  height: 40px;
  font-size: 28px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
}
.text p {
  text-align: left;
  text-indent: 2em;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  line-height: 32px;
}
.dangAn {
  width: 501px;
  height: 100%;
  margin-top: 36px;
  margin-bottom: 33px;
  margin-left: 18px;
  background: url("../assets/images/档案2.png");
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
}

.box ul li {
  width: 496px;
  height: 49px;
  display: flex;
  justify-content: space-around;
}
ul li:nth-child(odd) {
  background: #020b8a;
}
ul {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.box ul li span {
  width: 200px;
  height: 49px;
  font-size: 19px;
  font-weight: 400;
  color: white;
  line-height: 49px;
  overflow: hidden;
}

.box .first span {
  color: #3cdfff;
}
.imgyi {
  margin-top: -17px;
}
.person {
  margin-top: 64px;
  width: 1174px;
  height: 490px;
  background: url("../assets/images/个人档案1.png");
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
}
.left1 {
  width: 304px;
  height: 271px;
  margin-left: 31px;
  margin-top: 37px;
  box-sizing: border-box;
  background: #020b8a;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pic {
  width: 100px;
  height: 120px;
  background: url("../assets/images/photo.png");
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
  padding: 4px;
  margin-top: 21px;
}
.leftOne {
  width: 100px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
}
// .right1 {
//   flex: 1;
// }
.a {
  width: 794px;
  height: 126px;
  margin-left: 0px;
  margin-top: 38px;
}
.det {
  text-align: center;
  width: 300px;
  display: flex;
  justify-content: center;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
}
.person1 {
  display: flex;
}
.name {
  margin-left: 24px;
  margin-top: 25px;
  width: 44px;
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(6, 255, 255, 1);
  line-height: 30px;
}
.A {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 11px;
}
// .A:nth-child(odd){

// }
.a1 {
  text-align: left;
  width: 418px;
  font-size: 19px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
  margin-left: 30px;
  margin-top: 17px;
}
.name1 {
  width: 100%;
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(6, 255, 255, 1);
  line-height: 30px;
  margin-top: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.a2 {
  text-align: left;
  width: 402px;
  height: 26px;
  font-size: 19px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
  margin-top: 17px;
}
.a1 .a2-1 {
  display: inline-block;
}
.b2-1 {
  display: inline-block;

  width: 246px;
}
.a3 {
  display: flex;
}
.w2 {
  letter-spacing: 2em;
  margin-right: -2em;
}
.a1-2 {
  margin-left: 10px;
}
.end {
  width: 794px;
  height: 126px;
  margin-top: 20px;
}
.education {
  margin-top: 49px;
  width: 1174px;
  min-height: 154px;
  background: url("../assets/images/教育背景1.png");
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
}
.education:nth-last-child(1) {
  margin-bottom: 33px;
}
.box1 ul li {
  width: 1122px;
  height: 49px;
  display: flex;
  justify-content: space-around;
}
ul li:nth-child(odd) {
  background: #020b8a;
}
ul {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.box1 ul li span {
  width: 200px;
  height: 49px;
  font-size: 19px;
  font-weight: 400;
  color: white;
  line-height: 49px;
  overflow: hidden;
}

.box1 .first span {
  color: #3cdfff;
}
.box2 .last {
  display: inline-block;
  width: 133px;
  height: 26px;
  font-size: 19px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
  margin-top: 25px;
  margin-left: 8px;
}
.pic img {
  width: 100px;
  height: 120px;
}
</style>